<template>
    <div v-loading="loading">
        <el-dialog title="回复投诉" :visible.sync="visible" width="800px">
            <el-form :model="form" label-width="80px" ref="form">

                <el-form-item label="回复内容">
                    <el-input type="textarea"  placeholder="请输入内容"  style="width:500px" v-model="form.response">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 470px;margin: 30px auto;" @click="submit"  :loading="submitComplete">提交</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>

        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.content"></el-input>
            <el-select placeholder="选择类型" v-model="query.type">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in typeList"></el-option>
            </el-select>

            <el-select placeholder="选择是否已读" v-model="query.status">
                <el-option :key="item.value" :label="item.name" :value="item.value" v-for="item in statusList"></el-option>
            </el-select>
            <!-- <span style="color: #555;margin-left: 30px;margin-right: 10px;">是否已读</span>
            <el-switch @change="disableFun" active-color="#13ce66" inactive-color="#ff4949"
                v-model="form.status"></el-switch> -->
            <el-button @click="page=1;init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="创建投诉用户" prop>
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.user_id" :userInfos="scope.row.user_info" v-if="scope.row.user_id"></UserInfo>
                    </template>
                </el-table-column>

                <el-table-column label="类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == 'user'">用户</span>
                        <span v-else-if="scope.row.type == 'creation'">作品 </span>
                        <span v-else>直播</span>
                    </template>
                </el-table-column>

                <el-table-column label="被投诉用户" prop v-if="query.type == 'user'">
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.object_user.id" :userInfos="scope.row.object_user" v-if="scope.row.object_user"></UserInfo>
                    </template>
                </el-table-column>
                
                <el-table-column label="被投诉作品" prop v-if="query.type == 'creation'">
                    <template slot-scope="scope">
                       <div>{{  scope.row.creation_info ?  scope.row.creation_info.creation_name :''}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="被投诉直播房间号" prop v-if="query.type == 'live'">
                    <template slot-scope="scope">
                       <div>{{  scope.row.live_info ?  scope.row.live_info.room_id :''}}</div>
                    </template>
                </el-table-column>

                <el-table-column label="投诉截图" prop="thumbnail">
                    <template slot-scope="scope" v-if="scope.row.medias">
                        <el-image class="border" style="width: 50px; height: 50px" :src="scope.row.medias[0]" :preview-src-list="scope.row.medias"  fit="cover">
                          </el-image>
                    </template>
                </el-table-column>

                <el-table-column label="是否已读" prop="disable">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status == 1 ? 'success' : 'warning'">
                            {{ scope.row.status == 1 ? '已读' : '未读'
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary"
                            v-permission="['ADMIN', 'COMPLAINT_REPLY']">回复</el-button>
                        <el-button size="mini" slot="reference" type="success"
                            @click="toDetails(scope.row.id)"   v-permission="['ADMIN', 'COMPLAINT_DETAILS']">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>

<script>
import initData from '@/mixins/index'
import medium from '@/components/medium/index'
export default {
    name:"complaint-list",
    mixins: [initData],
    components: {
        medium
    },
    data() {
        return {
            submitComplete:false,
            query: {
                content: '',
                type: "user",
                status: null
            },
            form: {
                response: ''
            },
            disable: true,
            visible: false,
            id: '',
            typeList: [
                {
                    name: "用户",
                    value: "user"
                },
                {
                    name: "作品",
                    value: "creation"
                },
                {
                    name: "直播",
                    value: "live"
                }
            ],

            statusList:[
            {
                    name: "已读",
                    value: "1"
                },
                {
                    name: "未读",
                    value: "0"
                },
            ]
        }
    },
    mounted() {
        this.beforeInit()
    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },


        disableFun(res) {
            this.query.status = res == true ? 1 : 0
        },
        beforeInit() {
            console.log()
            this.url = '/complaint/index'
            this.init() //重新请求数据
        },



        toDetails(id) {
            this.$router.push({ path: "/complaint-details?id=" + id });
        },

        toForm(form) {
            console.log(form)
            this.visible = true //打开弹出框
            this.id  = form.id
        },

        closeBox() {
            this.visible = false
            this.form = {
                content: ''
            }
        },

        //提交
        submit() {
            if(this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.response)) {
                this.$message({
                    message: '请输入回复内容！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }
            this.$request.put('/complaint/update/' + this.id, this.form).then((res) => {
                this.$message({
                    message: '回复成功',
                    type: 'success'
                });
                this.submitComplete = false
                this.closeBox()
                this.init()
            }).catch((error)=>{
                this.submitComplete = false
                });

        },
    },
}
</script>

<style lang="scss" scoped></style>